<template>
  <div class="login">
    <!-- :style="{ 'background-image': 'url(' + require('../assets/loginbg.jpg') + ')' }" -->
    <div style="background-size: cover; background-color: #AAA; height: 100vh;">
      <el-container>
        <el-main>
          <div class="login-form-box">
            <el-form label-width="auto" size="large" style="max-width: 600px">
              <el-form-item>
                <el-avatar shape="square" :size="200" :src="require('../assets/logo.jpg')"
                  style="margin: auto; border-radius: 10%;box-shadow: 10px 10px 10px #666;" />
              </el-form-item>
              <el-form-item>
                <div style="width: 100%;">
                  <h1 style="text-align: center;">OTS - Sales System</h1>
                </div>
              </el-form-item>
              <el-form-item :label="util.language('用户名：', 'username: ')">
                <el-input v-model="data.username" />
              </el-form-item>
              <el-form-item :label="util.language('密码：', 'password: ')">
                <el-input v-model="data.password" type="password" />
              </el-form-item>
              <el-form-item :label="util.language('验证码：', 'captcha: ')">
                <div style="width: 60%;">
                  <el-input v-model="data.captcha" style="width: 100%;" />
                </div>
                <div style="width: calc(40% - 20px); height: 40px; margin-left: 20px;">
                  <img :src="'data:image/gif;base64,' + data.captchaBase64" style="width: 100%; height: 100%;"
                    @click="getCaptcha()" />
                </div>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%;" type="primary" @click="login()">
                  {{ util.language('登录', 'Login') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import api from '../apis/api'
import cache from '../utils/cache'
import util from '../utils/util'
import crypto from '../utils/crypto'
const router = useRouter()
const data = reactive({
  username: '',
  password: '',
  captcha: '',
  captchaBase64: '',
  captchaUid: '',
})

const user = cache.getObject(cache.keys.loginUser)
if (user && user.token) {
  router.replace('/')
}

const login = () => {
  api.post('/backend/user/login', {
    username: data.username,
    password: data.password,
    captcha: data.captcha,
    captchaUid: data.captchaUid,
  }).then(res => {
    cache.setObject(cache.keys.loginUser, res)
    ElMessage.success(util.language('登录成功', 'success'))
    router.replace('/')
  })
}

const getCaptcha = () => {
  api.get('/backend/user/captcha').then(res => {
    data.captchaBase64 = res.base64
    data.captchaUid = res.uid
  })
}

getCaptcha()
</script>

<style lang="less">
.login {

  .login-form-box {
    margin: auto;
    height: 550px;
    min-width: 300px;
    max-width: 450px;
    margin-top: calc(50vh - 350px);
    padding: 50px;
    width: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
  }
}
</style>